<template>
	<view class="desc">
<!-- 		<block v-if="shop.type === 5">
			<view class="tabs">
				<view>
					<view @tap="currentTab = index" :class="{ act: currentTab === index }" v-for="(item, index) in tabs" :key="index">{{ item }}</view>
				</view>
			</view>			
		</block> -->
		<block v-if="shop.type === 1 || shop.type === 5">
			<view class="title">
				<view>商品详情</view>
			</view>
		</block>
		<view class="content">
			<rich-text :nodes="desc" v-if="desc"></rich-text>
			<!-- <empty-data v-else>什么也没有~</empty-data> -->
		</view>
	</view>
</template>

<script>
	const reg = /\<img/gi
	const str = '<img style="max-width:100%;height:auto;display:block;"'
	import { mapGetters } from 'vuex'
	export default {
		props: {
			ProductBody: Object
		},
		data () {
			return {
				currentTab: 0,
				tabs: ['商品详情', '商品规格', '售后保障'],
				nodes_one: '',
				nodes_two: '',
				nodes_three: ''
			}
		},
		created() {
			if (this.ProductBody.description) this.nodes_one = this.ProductBody.description.replace(reg, str)
			if (this.ProductBody.specifications) this.nodes_two = this.ProductBody.specifications.replace(reg, str)
 		    if (this.ProductBody.customer_service) this.nodes_three = this.ProductBody.customer_service.replace(reg, str)
		},
		computed: {
			...mapGetters([ 'shop' ]),
			desc () {
				switch (this.currentTab) {
					case 0:
					return this.nodes_one
					break;
					case 1:
					return this.nodes_two
					break;
					case 2:
					return this.nodes_three
					break
				} 
			}
		}		
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.desc {
	margin: 20upx 0 0;
	background-color:white;
	.tabs {
		 height: @height;
		 & > view {
			 height: @height;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 background-color:white;
			 .border-bottom;		  
			 width: 100%;
			 & > view {
				 flex: 1;
				 height: 100%;
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 position: relative;
				 &::after {
					 content:'';
					 position:absolute;
					 left: 0;
					 bottom: 0;
					 width: 100%;
					 border-top:4upx solid @red;
					 transform: scaleX(0);
					 transition: transform .2s;
					 will-change: transform;
				 }		 
				 &.act {
					 color:@red;
					 &::after {
						 transform: scaleX(.6);
					 }
				 }
			 }	 
		 }
	}
	.title {
		height: @height;
		display: flex;
		align-items: center;
		padding: 0 15upx;
		.border-bottom;
		& > view {
			border-left: 5px solid @red;
			padding: 0 0 0 15upx;
		}
	}	
// 	.content {
// 		padding: 10upx 0 0;
// 		min-height: 250upx;
// 		position: relative;
// 	}
}
</style>